<script lang="ts" setup>
const form = reactive({
  account: '',
  password: '',
})
const formRef = ref()
const router = useRouter()
const userStore = useUserStore()

const rules = {
  account: [{ required: true, message: '请输入账号' }],
  password: [{ required: true, message: '请输入密码' }],
}

async function login() {
  const valid = await formRef.value.validate()
  if (valid) {
    try {
      // 登录
      try {
        const res = await service.auth.login(form)
        userStore.setToken(res)
        // 跳转
        router.push('/')
      } catch (e) {
        console.log(e)
      }
    } catch (err: any) {
      // refs.captcha.refresh()
      dialog.toast(err.message)
    }
  }
}
</script>

<template>
  <div
    class="w-full flex items-center justify-center lg:h-full lg:w-auto lg:px-[10vw] lg:py-[10vw]"
  >
    <img
      src="https://picsum.photos/800/450?blur"
      class="fixed inset-0 z--1 h-full w-full object-fill"
    />
    <div
      class="min-h-[100vh] w-full bg-background p-10 lg:max-w-[720px] lg:min-h-auto lg:w-auto lg:rounded"
    >
      <div class="mb-6 flex items-center gap-3">
        <h1 class="text-3xl font-bold"> 创需平台 </h1>
      </div>
      <el-form ref="formRef" :model="form" :rules="rules">
        <el-form-item prop="account">
          <el-input v-model="form.account" size="large" clearable placeholder="请输入账号" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="form.password"
            size="large"
            clearable
            placeholder="请输入密码"
            type="password"
          />
        </el-form-item>
        <el-form-item>
          <div class="mt-1 flex items-center text-xs">
            使用即代表你同意我们的
            <a target="_blank" class="mx-1 color-primary">服务协议</a>
            <div class="mx-1"> 和 </div>
            <a target="_blank" class="color-primary">隐私政策</a>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button size="large" type="primary" class="w-full" @click="login"> 登录 </el-button>
        </el-form-item>
        <el-form-item v-if="false">
          <div class="w-full flex items-center justify-end">
            <a target="_blank" href="http://localhost:3333/login" class="color-primary"
              >忘记密码？</a
            >
            <el-divider direction="vertical" />
            <a target="_blank" href="http://localhost:3333/login" class="color-primary">注册账号</a>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<route lang="yaml">
meta:
  layout: default
</route>
